<template>
	<view class="content">
		<image mode="widthFix" class="background" src="@/static/images/special/zero-bg.png" />
		<view class="rules" @tap="showRules('subsidy')">补贴规则<text class="iconfont icon-bangzhu"></text></view>
		<view class="subsidy-info">
			<image mode="widthFix" class="image" src="@/static/images/special/subsidy-bg.png" />
			<view class="price">¥<text class="text">{{ subsidy | Fixed(2) }}</text> 可用</view>
			<view class="desc">
				<text class="text" v-if="!subsidyEndTime">今日有效</text>
				<template v-else>
					<count-down
						background-color="#FD543A" 
						color="#FFFFFF"
						splitorColor="#FD543A"
						:show-day="false"
						:hour="subsidyEndTime[0]" 
						:minute="subsidyEndTime[1]"
						:second="subsidyEndTime[2]"
					></count-down>
					<text class="text">即将过期</text>
				</template>
			</view>
		</view>
		
		<!-- 骨架屏 -->
		<view class="skeleton" v-if="list[0].goodsList.length === 0 && !list[0].finished && !list[0].empty">
			<view class="skeleton-wrap" v-for="i in ['a', 'b', 'c', 'd']" :key="i">
				<skeleton class="goods-skeleton" :loading="true" avatarShape="square" :row="3" avatarSize="200rpx"></skeleton>
			</view>
		</view>

		<!-- 新人活动专区 -->
		<view class="special-item" v-if="newGoodsList.length > 0" :class="[{ first: newGoodsList.length > 0 }]">
			<view class="one-change" v-if="newGoodsList.length > 0">
				<view class="left">
					<text class="iconfont icon-webicon209"></text>
					<text class="text">{{ userInfo.newPerson === 1 ? '您还有1次新人免单机会' : '新人免单，确认收货后返现' }}</text>
				</view>
				<view class="person-rules" @tap="showRules('person')">新人免单规则</view>
			</view>
			<view class="special-header">
				<image class="image" src="@/static/images/special/special-person.png" />
			</view>

			<!-- 新人专区商品列表 -->
			<view class="goods-list">
				<zero-item :item="item" v-for="item in newGoodsList" @refresh="refresh"></zero-item>
			</view>
		</view>

		<!-- 百万补贴专区 -->
		<view class="special-item" :class="[{ first: newGoodsList.length === 0 }]">
			<view class="special-header" v-if="newGoodsList.length !== 0">
				<image class="image" src="@/static/images/special/special-subsidy.png" />
			</view>

			<!-- 百万补贴专区商品列表 -->
			<view class="goods-list">
				<zero-item :item="item" v-for="item in list[0].goodsList" @refresh="refresh"></zero-item>
				<load-more :loading="list[0].loading" :finished="list[0].finished" :empty="list[0].empty"></load-more>
			</view>
		</view>

		<!--回到顶部-->
		<view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop"><text class="iconfont icon-huidaodingbu"></text></view>

		<!--规则弹窗-->
		<popup ref="rules" class="rules-popup">
			<view class="main">
				<text class="iconfont icon-guanbi" @tap="$refs.rules.close()"></text>
				<scroll-view scroll-y="true" class="rules-scroll" v-html="rulesTemplate"></scroll-view>
			</view>
		</popup>

		<!--领取补贴金弹窗-->
		<popup ref="receiveSubsidy" class="receive-subsidy">
			<view class="main">
				<image mode="widthFix" class="bg" src="@/static/images/special/packet-close.png" />
				<view class="front">
					<text class="title">您有一份购物补贴专享红包</text>
					<text class="h2">最高得188元</text>
					<text class="desc">赶快领取吧</text>
					<image mode="widthFix" class="image" src="@/static/images/special/receive.png" @tap="receiveSubsidy" />
				</view>
			</view>
		</popup>

		<!--使用补贴金弹窗-->
		<popup ref="useSubsidy" class="use-subsidy">
			<view class="main">
				<image mode="widthFix" class="bg" src="@/static/images/special/packet-open.png" />
				<view class="front">
					<view class="top">
						<view class="price">¥<text class="text">{{ subsidyInfo.todayAllowanceMoney }}</text></view>
						<text class="desc">下单立减</text>
					</view>
					<view class="center">
						获得<text class="text">{{ subsidyInfo.todayAllowanceMoney }}元</text>现金补贴
					</view>
					<view class="count-down">
						<count-down
							v-if="subsidyEndTime"
							background-color="#C93620" 
							color="#FFFFFF"
							splitorColor="#FFFFFF"
							:show-day="false"
							:hour="subsidyEndTime[0]" 
							:minute="subsidyEndTime[1]"
							:second="subsidyEndTime[2]"
						></count-down>
						<text class="text">后失效</text>
					</view>
					<div class="bottom" @tap="$refs.useSubsidy.close()">
						立即使用
					</div>
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
	import Skeleton from '@/components/uni/Skeleton';
	import Popup from '@/components/uni/Popup';
	import CountDown from '@/components/uni/CountDown';
	import ZeroItem from '@/components/special/ZeroItem';
	import LoadMore from '@/components/LoadMore';
	import loader from '@/utils/mixin/loader';
	import moment from '@/utils/packges/moment'
	import {
		mapGetters
	} from 'vuex';

	export default {
		data() {
			return {
				subsidy: 0,
				subsidyInfo: {},
				rulesTemplate: '',
				rulesTemplatePerson: '',
				rulesTemplateSbusidy: '',
				newGoodsList: [],
				subsidyEndtime: [] // 百万补贴结束时间
			};
		},
		mixins: [loader],
		components: {
			ZeroItem,
			LoadMore,
			Skeleton,
			Popup,
			CountDown
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onShow() {
			// 页面初始化
			this.init();
			
			// 存在token获取用户信息
			if (uni.getStorageSync('token')) {
				// 获取用户信息
				// #ifdef H5
				this.$store.dispatch('getUserInfo', { versionCode: 140 });
				// #endif
				// #ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
					let params = { ...wgtinfo };
					this.$store.dispatch('getUserInfo', params);
				});
				// #endif
			}
		},
		methods: {
			// 页面初始化
			init() {
				// 获取新人免单专区
				this.getNewGoodsList();
				
				// 加载百万补贴列表
				this.loadMore(this.list[0]);
				
				// 获取弹窗规则
				this.getRules();
				
				// 获取今日补贴金额
				this.getSubsidy();
			},
			// 加载前处理
			beforeLoad() {
				this.params.freeStatus = 0;
				this.params.type = 3;

				this.service = this.$service.shopping.goods.dayAllowanceGoodsList(this.params);
				return true;
			},
			// 刷新页面
			refresh() {
				// 重新获取今日补贴金额
				this.getSubsidy();

				// 重新获取新人专区列表
				if (this.newGoodsList.length > 0) {
					this.getNewGoodsList();
				}

				// 重新获取百万补贴列表
				this.onRefresh(this.list[0], 'refresh');
			},
			// 获取规则
			getRules() {
				// 获取新人免单规则
				this.$service.shopping.shareTemplate.template({
					type: 11,
					playform: 'hf'
				}).then(res => {
					this.rulesTemplatePerson = res;
				});
				// 获取百万补贴规则
				this.$service.shopping.shareTemplate.template({
					type: 13,
					playform: 'hf'
				}).then(res => {
					this.rulesTemplateSbusidy = res;
				});
			},
			// 显示规则弹窗
			showRules(type) {
				if (type === 'subsidy') {
					this.rulesTemplate = this.rulesTemplateSbusidy;
				}
				if (type === 'person') {
					this.rulesTemplate = this.rulesTemplatePerson;
				}
				this.$refs.rules.open();
			},
			// 获取今日补贴金额
			getSubsidy() {
				this.$service.shopping.userDayAllowance.dayAllowanceInfo({
					app: 'hf'
				}).then(res => {
					// 开启领取补贴弹窗
					if (res.todayBillonStatus === 0) {
						this.$refs.receiveSubsidy.open();
					} else {
						this.subsidy = Number(res.todayAllowanceSurplus).toFixed(2);
						
						// 计算百万补贴倒计时结束时长
						let endTime = moment().format('YYYY-MM-DD 23:59:59');
						let startTime = moment().format('YYYY-MM-DD HH:mm:ss');
						let hoursLeft = moment(endTime).diff(startTime, 'hours');
						let minutesLeft = moment(endTime).diff(startTime, 'minutes') - (hoursLeft * 60);
						let secondsLeft = moment(endTime).diff(startTime, 'seconds') - (hoursLeft * 60 * 60) - (minutesLeft * 60);
						
						this.subsidyEndTime = [hoursLeft, minutesLeft, secondsLeft];
						
					}
					this.subsidyInfo = res;
				});
			},
			// 领取补贴
			receiveSubsidy() {
				this.$service.shopping.userDayAllowance.add({
					app: 'hf'
				}).then(() => {
					// 重新获取补贴金额
					this.getSubsidy();
					// 刷新用户数据
					// #ifdef H5
					this.$store.dispatch('getUserInfo', { versionCode: 140 });
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
						let params = { ...wgtinfo };
						this.$store.dispatch('getUserInfo', params);
					});
					// #endif
					// 关闭弹出
					this.$refs.receiveSubsidy.close();
					this.$refs.useSubsidy.open();
				});
			},
			// 获取新人免单专区
			getNewGoodsList() {
				this.$service.shopping.goods.dayAllowanceGoodsList({
					...this.params,
					type: 0
				}).then(res => {
					this.newGoodsList = res.list;
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		padding-bottom: 50rpx;
		position: relative;

		.background {
			width: 100%;
			display: block;
		}

		.rules {
			padding: 0rpx 22rpx 0rpx 28rpx;
			background: rgba(0, 0, 0, 0.3);
			color: #fff;
			font-size: 28rpx;
			border-radius: 50rpx 0 0 50rpx;
			position: absolute;
			right: 0;
			top: 20rpx;

			.iconfont {
				font-size: 28rpx;
				margin-left: 4rpx;
			}
		}

		.subsidy-info {
			position: relative;
			padding: 24rpx 20rpx;
			background: #FD543A;

			.image {
				width: 100%;
			}

			.price {
				left: 160rpx;
				position: absolute;
				top: 50rpx;
				color: #F3423E;
				font-size: 32rpx;

				.text {
					font-size: 40rpx;
					font-weight: 600;
					margin: 0 6rpx;
				}
			}

			.desc {
				position: absolute;
				left: 160rpx;
				top: 130rpx;
				color: #F3423E;
				font-size: 24rpx;
				@include flexBox(null, center);
				.text {
					margin-left: 10rpx;
				}
			}
		}

		.skeleton {
			background: #FD543A;
			padding: 0 20rpx 20rpx;

			.skeleton-wrap {
				padding: 0 20rpx;
				background: #fff;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
			}
		}

		.special-item {
			&.first {
				background: linear-gradient(#FD543A, #F6F7FA 40%);
			}

			background: #F6F7FA;

			.one-change {
				width: 680rpx;
				height: 60rpx;
				background: #FFEDC4;
				border-radius: 50rpx;
				margin: 0 auto;
				color: $main-color;
				padding: 0rpx 20rpx 0;
				font-size: 28rpx;
				@include flexBox(space-between, center);

				.left {
					@include flexBox(center, center);

					.iconfont {
						font-size: 44rpx;
					}
				}

				.person-rules {
					text-decoration: underline;
				}
			}

			.special-header {
				width: 326rpx;
				height: 30rpx;
				margin: 0 auto;

				.image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.rules-popup {
			.main {
				width: 600rpx;
				height: 800rpx;
				margin: 0 auto;
				background: #fff;
				border-radius: 16rpx;
				padding: 50rpx 30rpx;
				position: relative;

				.iconfont {
					position: absolute;
					right: 30rpx;
					top: 20rpx;
					font-size: 40rpx;
					color: #c8c9cc;
				}

				.rules-scroll {
					height: 100%;
					overflow-y: auto;
				}
			}
		}
	}

	.receive-subsidy {
		.main {
			width: 606rpx;
			height: 600rpx;
			position: relative;
			color: #fff;

			.bg {
				width: 100%;
				height: 100%;
				position: absolute;
			}

			.front {
				position: relative;
				padding-top: 100rpx;
				@include flexBox(center, center, column);

				.title {
					font-size: 26rpx;
				}

				.h2 {
					font-size: 60rpx;
				}

				.desc {
					font-size: 26rpx;
					margin-top: 60rpx;
					margin-bottom: 30rpx;
				}

				.image {
					width: 152rpx;
					height: 152rpx;
				}
			}
		}
	}

	.use-subsidy {
		.main {
			width: 750rpx;
			height: 740rpx;
			position: relative;

			.bg {
				width: 100%;
				height: 100%;
				position: absolute;
			}

			.front {
				position: relative;
				height: 100%;
				@include flexBox(space-between, center, column);

				.top {
					text-align: left;
					margin-bottom: 80rpx;
					margin-top: 200rpx;
					padding-left: 30rpx;

					.price {
						color: #F3423E;
						font-size: 76rpx;
					}

					.desc {
						color: #F3423E;
						font-size: 32rpx;
					}
				}

				.center {
					color: #FAE480;
					font-size: 44rpx;
					margin-top: -50rpx;

					.text {
						color: #fff;
					}
				}
				
				.count-down {
					color: #FAE480;
					font-size: 28rpx;
					@include flexBox(center, center);
					.text {
						margin-left: 10rpx;
					}
				}

				.bottom {
					width: 548rpx;
					line-height: 108rpx;
					background: linear-gradient(180deg, rgba(255, 237, 147, 1) 0%, rgba(253, 182, 38, 1) 100%);
					box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
					border-radius: 48rpx;
					font-size: 36rpx;
					text-align: center;
					color: rgba(242, 73, 56, 1);
					margin: 0 auto 50rpx;
				}
			}

			.time-box {
				font-size: 28px;
				color: #fae480;
				@include flexBox(center, center);
				text-align: center;
				margin-top: 16px;

				.time {
					@include flexBox(center, center);

					.time-span {
						display: block;
						width: 25px;
						height: 26px;
						line-height: 26px;
						color: #221d2c;
						border-radius: 4px;
						font-size: 20px;
						margin: 0 2px;
						padding: 0;
					}

					.time-bg {
						color: #ffffff;
						background: rgba(201, 54, 32, 1);
					}

					.division {
						width: 10px;
						height: 24px;
						line-height: 24px;
						display: inline-block;
						font-size: 28px;
					}
				}
			}

			.main-subsidy {
				width: 704px;
				height: 181px;
				font-size: 28px;
				padding-left: 248px;
				color: #f3423e;
				margin: 0 auto;
				margin-bottom: 20px;

				.price {
					font-size: 68px;

					span {
						font-size: 68px;
						font-weight: 500;
					}
				}
			}

			.main-title {
				font-size: 52px;
				color: #fae480;
				text-align: center;
				margin-top: 30px;

				span {
					color: #ffffff;
				}
			}
		}
	}
</style>
